<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
    <script src="../../jquery-1.12.4.js"></script>
    <script>
            $(function(){

                        /*
                        * 1:滚动条滚动触发事件
                        * 2:当超过一定的距离，我要修改导航栏的定位 position为fixed 的定位. top 0
                        * 3:当滚动条在某一个范围内，我应该吧这个导航栏的位置还原. position为 static
                        * */

                        /*我要监听页面上面的滚动条的滚动.*/

                        //获取高度.
                        var height=$(".top").height();

                        //监听滚动条的滚动.
                        $(window).scroll(function(){

                                //1:获取滚动条卷曲进去的高度.
                               var top=$(document).scrollTop();

                               if(top>height){
                                    $(".nav").css({
                                         "position":"fixed",
                                         "top":0
                                    })
                               }else{
                                   $(".nav").css({
                                         "position":"static"
                                   })
                               }

                        })



            })
    </script>
</head>
<body>
<div class="top">
    <img src="images/top.png"/>
</div>
<div class="nav">
    <img src="images/nav.png"/>
</div>
<div class="main">
    <img src="images/main.png"/>
</div>
</body>
</html>
